
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="head.htm"/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var deggendorf = new google.maps.LatLng(48.8333, 12.9667);
  var myOptions = {
    zoom:12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: deggendorf
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function calcRoute() {
  //var start = document.getElementById("start").value;
  var start = document.getElementById("start").value;
  var end = "48.8333, 12.9667";
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
</script>
<style type="text/css">
body { font-family: calibri, arial }
</style>
</head>
<body  onload="initialize()">
	<div id="head"><div style="float: left; padding: 30px;"><h1>CarManagementSystem</h1></div><div style="float: right;"><img src="images/rahmen.png"  /></div><div style="clear:both;"></div></div>
	
	<div style="padding: 50px;">
		<h2><c:out value="${title}"/></h2>
		<p><c:out value="${message}"/></p>
		<form method="post" action="SaveVerleih.html">
			<table class="editing">
				<colgroup>
					<col class="attribute"/>
					<col class="value"/>
				</colgroup>
				<tbody>
					<tr>
						<td>Typ des Autos:</td>
						<td>
							<input type="hidden" name="id" value='<c:out value="${auto.id}"/>'/>
							<c:out value="${auto.typ}"/>
						</td>
					</tr>
					<tr>
						<td>Mitarbeiter:</td>
						<td>
							<select name="mitarbeiterId">
								<c:forEach items="${mitarbeiterList}" var="mitarbeiter">
									<option value="${mitarbeiter.id}">${mitarbeiter.vorname} ${mitarbeiter.nachname}</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr>
						<td>Kilometer der Route:</td>
						<td>
							<input type="text" name="kilometerstand" value='<c:out value="${verleih.kilometerstand}"/>' size="20" />
						</td>
					</tr>
					<tr class="submit">
						<td colspan="2">
								<input type="submit" value=" Änderungen übernehmen "/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		
<div>
<b>Anfahrtplan: </b><br/>Geben Sie Ihre Heimadresse an:
<input id="start" onchange="calcRoute();"> <u>Suche</u>
 <br/><br/>

</div>
<div><div id="map_canvas" style="width:500px; height:300px"></div>  <br/>
<div id="directionsPanel" style="width:500px;"></div>
	</div></div>
	<jsp:include page="menu.htm"/>
</body>
</html>  